<template>
  <div>
    <a-radio-group v-if="type == 'radio'" v-model="codeValue" :disabled="disabled" @change="change">
      <a-radio v-for="(item,index) in codes" :key="index" :value="item[codeKey]">
        {{ item[nameKey] }}
      </a-radio>
    </a-radio-group>
    <a-select v-else-if="type == 'select'" allowClear :mode="multiple" :disabled="disabled" v-model="codeValue" @change="change">
      <a-select-option v-for="(item,index) in codes" :key="index" :value="item[codeKey]">
        {{ item[nameKey] }}
      </a-select-option>
    </a-select>
    <a-checkbox-group v-else-if="type == 'check'" v-model="codeValue" @change="change" :disabled="disabled">
      <a-checkbox v-for="(item,index) in codes" :key="index" :value="item[codeKey]">
        {{ item[nameKey] }}
      </a-checkbox>
    </a-checkbox-group>
    <template v-else>
      <span v-for="(item,index) in codes" :key="index" :value="item[codeKey]">
        {{ item[nameKey] }}
      </span>
    </template>
  </div>
</template>
<script>
import { postAction } from '@/api/manage'
export default {
  name: 'UserSelector',
  props: {
    type: {
      type: String,
      default: 'select',
    },
    codes: {
      type: Array,
      default: () => [],
    },
    nameKey: {
      type: String,
      default: 'name',
    },
    codeKey: {
      type: String,
      default: 'code',
    },
    code: {
    },
    multiple: {
      //select是才有效果
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    codeValue: {
      get() {
        if (this.type == 'radio') {
          return this.code
        } else if (this.type == 'select') {
          if (this.multiple) {
            if (this.code) {
              return this.code.split(',')
            } else {
              return []
            }
          } else {
            return this.code
          }
        } else if (this.type == 'check') {
          if (this.code) {
            return this.code.split(',')
          } else {
            return []
          }
        }

        return this.code
      },
      set(value) {
        if (Array.isArray(value)) {
          this.$emit('update:code', value.join(','))
        } else {
          this.$emit('update:code', value)
        }
      },
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    change(e) {
      let value = e
      let returnValue = value
      if (this.type == 'radio') {
        returnValue = e.target.value
      } else if (this.type == 'select') {
        if (this.multiple) {
          if (value) {
            returnValue = Array.isArray(value)?value.join(','):value
          } else {
            returnValue = ''
          }
        } else {
          returnValue = value
        }
      } else if (this.type == 'check') {
        if (value) {
          returnValue = value.join(',')
        } else {
          returnValue = ''
        }
      }
      this.$emit('update:code', returnValue)
      this.$emit('change', returnValue)
    },
    getRandomStr(len) {
      len = len || 32
      var $chars =
        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
  },
}
</script>
